<template>
  <div class="app-container">

    <u-page title="月租管理">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="月租类型" prop="type">
            <el-select v-model="listQuery.type" placeholder="月租类型" clearable>
              <el-option label="全部" value="" />
              <el-option label="月租车" value="1" />
              <el-option label="半月租" value="2" />
              <el-option label="员工" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="卡号" prop="cardNo">
            <el-input v-model="listQuery.cardNo" placeholder="卡号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="车牌" prop="plateNo">
            <el-input v-model="listQuery.plateNo" placeholder="车牌" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="车主" prop="name">
            <el-input v-model="listQuery.name" placeholder="车主姓名" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="listQuery.mobile" placeholder="车主手机号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="备注" prop="note">
            <el-input v-model="listQuery.note" placeholder="关键词" clearable style="width: 200px" />
          </el-form-item>

          <el-form-item label="创建时间">
            <u-date-time-picker v-model="searchDate" @change="changeSearchDate" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        index="index"
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
      </u-table>
    </u-page>

  </div>
</template>
<script>

export default {
  components: { },
  data() {
    return {
      api: this.$u.api.PluginsParkingRental,
      list: [],
      listLoading: false,
      listOptions: {
        index: true,
        mutiSelect: true,
        stripe: true
      },
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        type: '',
        beginTime: '',
        endTime: '',
        orderNo: '',
        tradeNo: '',
        ack: '',
        status: '',
        send_status: ''
      },
      inputDateRange: [],
      // 表格
      columns: [
        {
          prop: 'type',
          label: '类型',
          render: (h, params) => {
            if (params.row.type === 1) {
              return h('el-tag', { props: { type: 'success' }}, '月租车')
            }
            if (params.row.type === 2) {
              return h('el-tag', { props: { type: 'success' }}, '半月租')
            }
            if (params.row.type === 3) {
              return h('el-tag', { props: { type: 'success' }}, '员工')
            }
          }
        },
        {
          prop: 'cardNo',
          label: '卡号'
        },
        {
          prop: 'plateNo',
          label: '车牌'
        },
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'mobile',
          label: '手机号'
        },
        {
          prop: 'beginTime',
          label: '开始时间'
        },
        {
          prop: 'endTime',
          label: '到期时间'
        },
        {
          prop: 'rentalValid',
          label: '状态',
          render: (h, params) => {
            let title, type
            switch (params.row.status) {
              case 0:
                title = '已到期'
                type = 'danger'
                break
              case 1:
                title = '生效中'
                type = 'success'
                break
              case 2:
                title = '未生效'
                type = 'warning'
                break
              default:
                title = ''
                type = ''
                break
            }
            return h('el-tag', { props: { type }}, title)
          }
        },
        {
          prop: 'surplus',
          label: '剩余天数',
          render: (h, params) => {
            if (params.row.surplus) {
              return h('div', params.row.surplus + '天')
            }
          }
        },
        {
          prop: 'spaceNo',
          label: '分配车位'
        },
        {
          prop: 'createdAt',
          label: '创建时间',
          timestamp: true
        },
        {
          prop: 'note',
          label: '备注'
        }
      ],

      dialogFormVisible: false,
      dialogStatus: '',

      dataForm: {},
      rules: {
        note: [
          { required: true, message: '请输入备注信息', trigger: ['blur'] }
        ]
      },
      jsonDialogVisible: false,
      detailJson: {}

    }
  },
  created() {
    this.hdlList()
  },
  methods: {
  }
}
</script>
